<template>
  <!-- 购买合伙人资格 -->
  <view>
    <view class="tianshu">
      <view class="tian-box" :class="iscolor =='1'?'active':''" @click="yueshu(1)">1份</view>
      <view class="tian-box" :class="iscolor =='2'?'active':''" @click="yueshu(2)">2份</view>
      <view class="tian-box" :class="iscolor =='3'?'active':''" @click="yueshu(3)">3份</view>
      <view class="tian-box" :class="iscolor =='4'?'active':''" @click="yueshu(4)">4份</view>
      <view class="tian-box" :class="iscolor =='5'?'active':''" @click="yueshu(5)">5份</view>
      <view class="tian-box" :class="iscolor =='6'?'active':''" @click="yueshu(6)">6份</view>
      <view class="tian-box" :class="iscolor =='7'?'active':''" @click="yueshu(7)">7份</view>
      <view class="tian-box" :class="iscolor =='8'?'active':''" @click="yueshu(8)">8份</view>
    </view>
    <u-field class="lablecolor" type="password" v-model="zfpwd" label="密码" placeholder="请填写支付密码" :border-bottom="false">
    </u-field>
    <button class="btns" type="primary" @click="baocun">保存</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        iscolor: 1,
        fen: 1, // 购买几份
        zfpwd: '', // 支付密码
      }
    },
    methods: {
      // 购买联合合伙人资格
      async baocun() {
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/qualification',
          data: {
            uid: uni.getStorageSync('uid'),
            token: uni.getStorageSync('token'),
            fen: this.fen,
            zfpwd: this.zfpwd
          }
        })
        if (res.code == 200) {
          this.fen = 1,
            this.zfpwd = ''
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      },
      // 选择天数
      yueshu(type) {
        console.log(type)
        this.iscolor = type
        this.fen = type
      }
    }
  }
</script>

<style>
  page {
    background-color: #131a2a;
    color: #FFFFFF;
    padding: 60rpx 40rpx;
  }

  .lablecolor {
    color: #FFFFFF;
  }

  .btns {
    width: 90%;
    margin: 100rpx 5% 0;
  }

  .money {
    margin-left: 28rpx;
  }

  .tianshu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
  }

  .tian-box {
    color: #007AFF;
    width: 20%;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 10rpx;
    text-align: center;
    border: 1px solid #007AFF;
    margin: 40rpx 2.5%;
  }

  .active {
    color: #FFFFFF;
    background-color: #007AFF;
  }
</style>
